<template>
  <el-header>
    <el-row :gutter="24">
      <el-col :span="4">
        <router-link tag="span" to="index" class="logo">好酒网</router-link>
      </el-col>
      <el-col :offset="16" :span="4">
        <div class="user-info">
          <el-dropdown @command="handleCommand">
            <span class="el-dropdown-link">
              {{ userInfo.nickname }}
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item icon="el-icon-plus" command="showUserInfo">
                <router-link tag="span" to="user-info">用户信息</router-link>
              </el-dropdown-item>
              <el-dropdown-item icon="el-icon-circle-check" command="logout"
                >退出登录</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-col>
    </el-row>
  </el-header>
</template>
<script>
import { mapState, mapMutations } from "vuex";
export default {
  name: "Header",
  data() {
    return {};
  },
  computed: {
    ...mapState({
      userInfo: (state) => JSON.parse(state.userInfo),
    }),
  },
  methods: {
    ...mapMutations(["logout"]),
    handleCommand(command) {
      if (command === "logout") {
        this.logout();
        this.$router.replace("login");
      }
    },
  },
  mounted() {
    console.log("user", this.userInfo);
  },
};
</script>
<style lang="less">
.logo {
  cursor: pointer;
}
.user-info {
  text-align: right;
}
</style>